<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
<script>
  var moonTypeOptions = {
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
            "/" + zoom + "/" + normalizedCoord.x + "/" +
            (bound - normalizedCoord.y - 1) + ".jpg";
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: "Moon"
  };

  var moonMapType = new google.maps.ImageMapType(moonTypeOptions);

  function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
      center: myLatlng,
      zoom: 1,
      streetViewControl: false,
      mapTypeControlOptions: {
        mapTypeIds: ["moon"]
      }
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    map.mapTypes.set('moon', moonMapType);
    map.setMapTypeId('moon');
  }

  // Normalizes the coords that tiles repeat across the x axis (horizontally)
  // like the standard Google map tiles.
  function getNormalizedCoord(coord, zoom) {
    var y = coord.y;
    var x = coord.x;

    // tile range in one direction range is dependent on zoom level
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
    var tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
      return null;
    }

    // repeat across x-axis
    if (x < 0 || x >= tileRange) {
      x = (x % tileRange + tileRange) % tileRange;
    }

    return {
      x: x,
      y: y
    };
  }
  </script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 500px; height: 400px;"></div>
</body>
</html>
